<template>
  <DetailBox :title="getRouteTitle()" :border="2">
    <template #center>
      <slot name="center">
        <ContentBox :title="'文章列表'" :border="3" :isDetail="true" :detailTitle="'新增文章'"
                    @clickA="addOrEdit(null,'add')">
          <template #center>
            <slot name="center">
              <el-table class="complexTable" v-loading="loading" :data="article"
                        @selection-change="handleSelectionChange" :stripe="true">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="文章ID" width="80" align="center"></el-table-column>
                <el-table-column prop="created_at" label="创建时间" width="200" align="center"></el-table-column>
                <el-table-column prop="title" label="标题" align="center"></el-table-column>
                <el-table-column prop="author" label="作者" width="100" align="center"></el-table-column>
                <el-table-column prop="pageviews" label="阅读量" width="100" align="center"></el-table-column>
                <el-table-column prop="type" label="类别" width="100" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" width="100" align="center">
                  <template #default="scope">
                    <el-tag :type="scope.row.status === 'published' ? 'success' : 'info'">{{
                        scope.row.status
                      }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="250" align="center">
                  <template #default="scope">
                    <el-button size="small" type="primary" @click="addOrEdit(scope.row, '')">编辑</el-button>
                    <el-button size="small" @click="release(scope.row.id)"
                               :type="scope.row.status === 'published' ? '' : 'success'">
                      {{ scope.row.status === 'published' ? '草稿' : '发布' }}
                    </el-button>
                    <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <el-pagination class="tablePagination"
                             background
                             v-model:currentPage="currentPage" :page-size="pageSize"
                             :page-sizes="[15, 30, 45, 60]"
                             layout="prev, pager, next,sizes," :total="100" @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"></el-pagination>
            </slot>
          </template>
        </ContentBox>
      </slot>
    </template>
  </DetailBox>


  <el-dialog class="Z" v-model="dialogFormVisible" :title="formTitle">
    <el-form :model="form">
      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="form.created_at" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="作者" :label-width="formLabelWidth">
        <el-input v-model="form.author" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="阅读量" :label-width="formLabelWidth">
        <el-input v-model="form.pageviews" autocomplete="off"/>
      </el-form-item>
      <!--      <el-form-item label="Zones" :label-width="formLabelWidth">-->
      <!--        <el-select v-model="form.region" placeholder="Please select a zone">-->
      <!--          <el-option label="Zone No.1" value="shanghai"/>-->
      <!--          <el-option label="Zone No.2" value="beijing"/>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save"
        >保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue'
// import { getArticleList } from '@/api/article'
import {IArticleList} from '@/utils/interface'
import DetailBox from "@/views/components/DetailBox.vue";
import ContentBox from "@/views/components/ContentBox.vue";
import {getRouteTitle} from "@/utils";

const article = ref<IArticleList[]>([]) //文章列表
const loading = ref<boolean>(true) //加载
const currentPage = ref<number>(1) //当前页
const pageSize = ref<number>(15) //每页大小
const ids = ref<number[]>([]) //用户选择ids
const dialogVisible = ref<boolean>(false) //加载

/**
 * @desc: 获取文章列表
 */

const getArticleList = (d: any) => {
  return {
    data: {
      code: 10000,
      data: {
        items: [
          {
            id: 1111,
            created_at: 1,
            title: 2,
            author: 3,
            pageviews: 4,
            type: 1111,
            status: 1111,
          },
          {
            id: 1111,
            created_at: 5,
            title: 6,
            author: 7,
            pageviews: 8,
            type: 9,
            status: 1111,
          },
          {
            id: 1111,
            created_at: 1111,
            title: 1111,
            author: 1111,
            pageviews: 1111,
            type: 1111,
            status: 1111,
          },
          {
            id: 1111,
            created_at: 1111,
            title: 1111,
            author: 1111,
            pageviews: 1111,
            type: 1111,
            status: 1111,
          }, {
            id: 1111,
            created_at: 1111,
            title: 1111,
            author: 1111,
            pageviews: 1111,
            type: 1111,
            status: 1111,
          }, {
            id: 1111,
            created_at: 1111,
            title: 1111,
            author: 1111,
            pageviews: 1111,
            type: 1111,
            status: 1111,
          }, {
            id: 1111,
            created_at: 1111,
            title: 1111,
            author: 1111,
            pageviews: 1111,
            type: 1111,
            status: 1111,
          }, {
            id: 1111,
            created_at: 1111,
            title: 1111,
            author: 1111,
            pageviews: 1111,
            type: 1111,
            status: 1111,
          }, {
            id: 1111,
            created_at: 1111,
            title: 1111,
            author: 1111,
            pageviews: 1111,
            type: 1111,
            status: 1111,
          },
        ]
      }
    }
  }
}
const handleGetArticleList = async () => {
  loading.value = true
  const res = await getArticleList({page: currentPage.value, limit: pageSize.value})
  const {code, data} = res.data
  if (code === 10000) {
    article.value = data.items
  }
  loading.value = false
}
/**
 * @desc: 删除
 * @param {number} id
 * @return {*}
 */
const del = (id: number) => {
  article.value = article.value.filter((item) => {
    return item.id !== id
  })
  ElNotification.success({
    title: '温馨提示',
    message: '删除成功',
    showClose: true
  })
}
/**
 * @desc: 删除所选
 * @param {*}
 * @return {*}
 */
const delArr = () => {
  if (ids.value.length === 0) {
    ElMessage.warning('请选择文章')
    return false
  }
  ids.value.forEach((item) => {
    article.value = article.value.filter((itemTwo) => {
      return itemTwo.id !== item
    })
  })
  ElNotification.success({
    title: '温馨提示',
    message: '删除成功',
    showClose: true
  })
}
/**
 * @desc: 发布
 * @param {number} id
 * @return {*}
 */
const release = (id: number) => {
  article.value.forEach((item) => {
    if (item.id === id) {
      item.status = item.status === 'draft' ? 'published' : 'draft'
      ElMessage.success('操作成功')
    }
  })
}
/**
 * @desc: 刷新
 */
const refresh = () => {
  currentPage.value = 1
  handleGetArticleList()
}
/**
 * @desc: 监听用户全选
 * @param {IArticleList[]} arr
 * @return {*}
 */
const handleSelectionChange = (arr: IArticleList[]) => {
  const arrIds: number[] = []
  arr.forEach((item) => {
    arrIds.push(item.id)
  })
  ids.value = arrIds
}
/**
 * @desc: 关闭弹窗
 * @param {*}
 * @return {*}
 */
const handleClose = () => {
  dialogVisible.value = false
}
/**
 * @desc:设置显示条数
 * @param {number} size 显示条数
 */
const handleSizeChange = (size: number) => {
  pageSize.value = size
  handleGetArticleList()
}
/**
 * @desc:设置当前页数
 * @param {number} page 页数
 */
const handleCurrentChange = (page: number) => {
  currentPage.value = page
  handleGetArticleList()
}

handleGetArticleList()


/*
表格新增编辑操作
* */
const resetState = (state) => {
  for (const key in state) {
    if (state.hasOwnProperty(key)) {
      state[key] = null;
    }
  }
}

const dialogFormVisible = ref(false)
const formTitle = ref('新增')

const formLabelWidth = '140px'

const form = reactive({
  created_at: '',
  title: '',
  author: '',
  pageviews: '',
})

const addOrEdit = (row = null, str = '') => {
  if (str === 'add') {
    formTitle.value = '新增'
    resetState(form)
  } else {
    formTitle.value = '编辑'
    Object.assign(form, row)
  }
  dialogFormVisible.value = true
}

const save = () => {
  console.log(form)
  dialogFormVisible.value = true
}


</script>
<style lang="scss">
.complexTable {
  height: calc(100% - 30px);
  overflow: auto;
  padding-bottom: 30px;
}

.tablePagination {
  justify-content: center;
  //margin-top: -10px;
}
</style>
